<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M976.896 883.712q0 19.456-6.656 36.352t-18.944 29.696-28.672 19.968-35.84 7.168l-743.424 0q-19.456 0-36.864-7.168t-30.72-19.968-20.992-29.696-7.68-36.352l0-510.976q0-38.912 27.136-66.048t66.048-27.136l743.424 0q38.912 0 66.048 27.136t27.136 66.048l0 139.264-232.448 0q-38.912 0-66.048 26.624t-27.136 65.536q1.024 26.624 11.264 47.104 8.192 17.408 27.136 31.744t54.784 14.336l232.448 0 0 186.368zM837.632 232.448l-464.896 0q55.296-28.672 104.448-55.296 43.008-22.528 84.992-45.056t65.536-34.816q35.84-19.456 64-17.92t47.616 9.728q22.528 11.264 38.912 29.696zM698.368 604.16q0-19.456 13.312-32.768t32.768-13.312 32.768 13.312 13.312 32.768-13.312 33.28-32.768 13.824-32.768-13.824-13.312-33.28z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
